CSS Combinators

    In This CSS tutorial, we will be discussing the concept of combinators in CSS. We will be covering all the various symbols we use to show the relationship between the selectors.

    CSS Combinators

    In Internal and External CSS styling we use selectors to select the elements on which we want to perform styling. And an element can share different type of relation with other elements, for instance a <p> element can be child element of <div> and a parent element of <span>. Using the CSS combinators we can leverage this relationship and select specific elements for styling based on their relationship with other elements. There are four types of CSS combinators

    1. descendant selector (<space>)
    2. child selector (>)
    3. adjacent sibling selector (+)
    4. general sibling selector (~)

    Descendant Selector (<space>)

    The descendant selector is used for selecting specified elements which are the descendants of an element. for example, if we want to apply styling on the all paragraph elements of a div element then we can use the descendant selector. To use the descendant, we first write the parent element name followed by the space then the child name.

    Syntax 

    div p 
{  
 ……styling code 
}

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            div p {
                color: white;
                background-color: blue;
            }
        </style>
    </head>
<body>
    <div>
         <p>This is a descendant paragraph of div tag.</p>
         <p>This is a descendant paragraph of div. tag</p>
    </div>
</body>
</html>

    Preview

    This is a descendant paragraph of div tag.

    This is a descendant paragraph of div. tag

    Child Selector ( > )

    The child selector is represented using  > symbol, and it selects all the elements which are the direct children of the specified element.

    Syntax 

    div > p {…}

    this will select all the paragraphs which are the direct child of the div tag.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            div > p {
                color: white;
                background-color: blue;
            }
        </style>
    </head>
<body>
    <div>
        <p>1. This is a direct child of div tag.</p>
        <p>2 This is also a direct child of div tag.</p>
        <section>
           <p>3. This is not a direct child of div tag</p>
       </section>
   </div>
</body>
</html>

    Preview

    1. This is a direct child of div tag.

    2 This is also a direct child of div tag.

    3. This is not a direct child of div tag

    Adjacent Sibling Selector (+)

    The sibling selector is represented using + symbol, and it selects the adjacent sibling or the just next element of a specified element. The adjacent sibling selector only selects one immediate or adjacent sibling.

    Syntax: 

    div + p {…..CSS code}

    This will select that paragraph element which is a sibling of div tag and came after it.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            div + p {
                color: white;
                background-color: blue;
            }
        </style>
    </head>
<body>
  <p>1. This paragraph is the sibling element of div and comes before div</p>
  <div>
      <p>2. This paragraph is a child of div tag.</p>
      <p>3. This paragraph is a child of div tag.</p>
  </div>
  <p>4. This paragraph is the sibling element of div and comes after div</p>
</body>
</html>

    Preview

    1. This paragraph is the sibling element of div and comes before div

    2. This paragraph is a child of div tag.

    3. This paragraph is a child of div tag.

    4. This paragraph is the sibling element of div and comes after div

    General Sibling Selector ( ~)

    General Sibling selector shows the relationship between two elements using ~ symbol. It selects all the sibling elements of the specified elements.

    Syntax 

    div ~ p {…CSS code}

    This will select all the paragraph elements which are the siblings of div and comes after div.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            div ~ p {
                color: white;
                background-color: blue;
            }
        </style>
    </head>
<body>

   <p>1. This paragraph is the sibling element of div and comes before div</p>

  <div>
    <p>2. This paragraph is a child of div tag.</p>
    <p>3. This paragraph is child of div tag.</p>
  </div>

 <p>4. This paragraph is the sibling element of div and comes after div</p>
 <p>5. This paragraph is the sibling element of div and comes after div</p>
</body>

</html>

    Preview

    1. This paragraph is the sibling element of div and comes before div

    2. This paragraph is a child of div tag.

    3. This paragraph is child of div tag.

    4. This paragraph is the sibling element of div and comes after div

    5. This paragraph is the sibling element of div and comes after div

    Summary

    • Combinators are used to show the relationship between the selectors.
    • There are four types of combinators, descendant, child, adjacent sibling, and general sibling.
    • The descendant selects all the specified child elements.
    • The child selector only selects the direct child elements.
    • The adjacent sibling selector selects only the immediate next sibling.
    • The general sibling selector selects all the next siblings.
    Previous Tutorial Next Tutorial